<template lang="html">
  <div class="product2">
    <!-- 推荐理由 -->
    <div class="reason2">
      <p><img src="../../static/imgs/jian2.png" alt="">推荐理由</p>
      <p>{{obj.productDescription}}</p>
    </div>
    <!-- 线路特色 -->
    <div class="lineChara2">
      <p><img src="../../static/imgs/shu2.png" alt="">线路特色</p>
      <div class="lineShow2" v-if="obj.characteristicList">
        <p v-for="(item,index) of  obj.characteristicList.split('\r\n')" v-if="index<num">{{item}}</p>
        <p class="showP2" @click="showFn1()" v-if="bol">{{text}}<img :src="imgurl"/></p>
        <p class="showP2" @click="showFn2()" v-else>{{text}}<img :src="imgurl"/></p>
      </div>
    </div>
    <!-- 线路行程 -->
    <div class="linePro2">
      <p><img src="../../static/imgs/shu2.png" alt="">线路行程</p>
      <div class="days2">
        <div v-for="(item,id) of obj2" >
          <span>{{item.scheduleNo}}</span>
          <span v-for="(i,ind) of item.dayTrip"v-if="i=='TRA001'"><img src="../../static/imgs/art2.png" alt=""></span>
          <span v-else>{{i}}</span>
          <lines :obj="item"></lines>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import lines from '../components/lineNew.vue'
export default {
  components:{
    lines
  },
  props:['obj','obj2'],
  data(){
    return{
      text:"展开",
      imgurl:'../../static/imgs/down2.png',
      bol:true,
      num:3
    }
  },
  methods:{
    showFn1(){
      this.text='收起';
      this.imgurl='../../static/imgs/up2.png';
      this.bol=false;
      this.num=7;
      // console.log(index);
    },
    showFn2(){
      this.text='展开';
      this.imgurl='../../static/imgs/down2.png';
      this.bol=true;
      this.num=3;
    }
  }
}
</script>

<style lang="css">
  .product{
    font-size: 1.2rem;
  }
  .reason2,.lineChara2,.linePro2{
    margin-top: 1rem;
    background: #fff;
    padding: 1.5rem;
  }
  .reason2>p:nth-of-type(1){
    color: #ffaa01;
    font-size: 1.6rem;
  }
  .reason2>p:nth-of-type(2){
    margin-top: 0.8rem;
    color: #666;
    font-size: 1.2rem;
    line-height: 2rem;
    letter-spacing: 0.1rem;
  }
  .reason2>p>img,.lineChara2>p>img,.linePro2>p>img{
    width: 6%;
    margin-right: 0.5rem;
    vertical-align: bottom;
  }
  .lineChara2>p:nth-of-type(1),.linePro2>p:nth-of-type(1){
    font-size: 1.6rem;
  }
  .lineShow2{
    line-height: 2rem;
    color: #666;
    margin-top: 1rem;
  }
  .lineShow2 p:last-child{
    text-align: center;
    color: #999;
  }
  .lineShow2 p:last-child img{
    vertical-align: middle;
  }
  .showP2{
    margin-top: 1.5rem;
  }
  .days2 img{
    vertical-align: middle;
  }
</style>
